import React, { memo } from 'react'
import { Col, Row } from 'antd'
import SelectedHotelsNumber from '../SelectedHotelsNumber'
import SelectedOccupancy from '../SelectedOccupancy'
import SlectedRent from '../SelectedRent'

function HotelStatistics ({ selectedTags }) {

  return (
    <>
      <div className="site-card-wrapper" style={{ width: '100%', height: '240px', backgroundColor: 'rgba(0,0,0,.03)' }}>
        <Row gutter={16} style={{ height: '100%', }}>
          <Col span={8} style={{ height: '100%', }}>
            <SelectedHotelsNumber selectedTags={selectedTags} />
          </Col>
          <Col span={8} style={{ height: '100%', }}>
            <SelectedOccupancy selectedTags={selectedTags} />
          </Col>
          <Col span={8} style={{ height: '100%', }}>
            <SlectedRent selectedTags={selectedTags} />
          </Col>

        </Row>
      </div>

    </>
  )
}


export default memo(HotelStatistics)

